<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/daily' }">加班审批</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div>
          <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%">
            <el-table-column
                    sortable
                    label="name"
                    prop="name">
            </el-table-column>
            <el-table-column
                    sortable
                    label="创建日期"
                    prop="createTime">
              <template  slot-scope="scope">
                {{scope.row.createTime.slice(0,10)}}
              </template>
            </el-table-column>
            <el-table-column
                    sortable
                    label="原因"
                    prop="reason">
            </el-table-column>
            <el-table-column
                    sortable
                    label="开始时间"
                    prop="startTime">
              <template  slot-scope="scope">
                {{scope.row.startTime.slice(11,16)}}
              </template>
            </el-table-column>
            <el-table-column
                    sortable
                    label="结束时间"
                    prop="endTime">
              <template  slot-scope="scope">
                {{scope.row.endTime.slice(11,16)}}
              </template>
            </el-table-column><el-table-column
                    sortable
                    label="结束时间"
                    prop="endTime">
              <template  slot-scope="scope">
                {{scope.row.endTime.slice(11,16)}}
              </template>
            </el-table-column>
            <el-table-column
                    sortable
                    label="是否批准"
                    prop="isAgree">
              <template slot-scope="scope">
                <div style="color: #1abc9c">
                  {{scope.row.isAgree===1?'批准':''}}
                </div>
                <div style="color: #ff5777;">
                  {{scope.row.isAgree===2?'不批准':''}}
                </div>
                <div style="color: goldenrod">
                  {{scope.row.isAgree===0?'待处理':''}}
                </div>
              </template>
            </el-table-column>

            <el-table-column
                    align="right"
                    fixed="right">
              <template slot-scope="scope">
                <div v-show="scope.row.isAgree===2?false:true&&scope.row.isAgree===1?false:true">

                  <el-button
                          size="mini"
                          @click="agree(scope.$index, scope.row)">同意</el-button>
                  <el-button
                          size="mini"
                          type="danger"
                          @click="disagree(scope.$index, scope.row)">不同意</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page_total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import {getAllOverTime, approve} from "../../network/Overtime"
  export default {
    name: "OvertimeAudit",
    data() {
      return {
        account: window.sessionStorage.getItem('account'),
        tableData: [],
        search: '',
        currentPage4: 5,
        page: {
          pageNo: 1,
          pageSize: 5
        },
        page_total: 0,
        loading: true
      }
    },
    beforeMount() {
      this.getAllOverTime()
    },
    methods: {
      // 获取部门信息
      getAllOverTime() {
        getAllOverTime(this.page).then(res => {
              console.log(res)
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
              setTimeout(() => {
                this.loading = false
              },500)
            },
            error => {
              console.log(error)
            });
      },
      agree(index, row) {
        console.log(row)
        approve(row.id, 1)
        this.getAllOverTime()
      },
      disagree(index, row) {
        approve(row.id, 2)
        this.getAllOverTime()
      },
      // 修改分页的大小
      handleSizeChange(val) {
        this.page.pageSize = val
        getAllOverTime(this.page).then(res => {
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
              setTimeout(() => {
                this.loading = false
              },500)
            },
            error => {
              console.log(error)
            })
      },
      // 修改当球按页数
      handleCurrentChange(val) {
        this.page.pageNo = val
        getAllOverTime(this.page).then(res => {
              this.tableData = res.data.content;
              this.page_total = res.data.content.length;
              this.page_total = res.data.totalElements
              setTimeout(() => {
                this.loading = false
              },500)
            },
            error => {
              console.log(error)
            })
      },
    }
  }
</script>

<style scoped>

</style>
